<!--
 * @Author       : 郭庆红
 * @Date         : 2025-03-03 15:43:11
 * @LastEditors  : 郭庆红
 * @LastEditTime : 2025-03-21 10:00:36
 * @FilePath     : e:\project\zhlx-autoform-ui\src\components\ZHLX-Components\ZHLX-processSelect\index.vue
 * @Description  : 
 * Copyright 2025 OBKoro1, All Rights Reserved. 
 * 2025-03-03 15:43:11
-->
<template>
  <div class="zhlx-processSelset-container">
    <div class="process el-input__inner">
      <div class="content" @mouseenter="showIcon" @mouseleave="hideIcon">
        <div class="text">
          <div
            v-if="data.length > 0"
            class="text-content"
            v-for="item in data"
            :key="item.exampleId"
          >
            <div @click="jump(item)">
              <el-input
                size="small"
                v-model="item.exampleTitle"
                class="read-only"
                readOnly
                >{{ item.exampleTitle }}</el-input
              >
            </div>
            <el-icon class="close" v-if="!disabled" @click="removeProcess(item)"
              ><Close
            /></el-icon>
          </div>
          <el-input
            size="small"
            class="read-only"
            readOnly
            v-if="data.length === 0"
            >{{ placeholder }}</el-input
          >
        </div>
        <div class="right"></div>
      </div>
      <el-icon v-if="!disabled" class="icon" @click="openDialog"
        ><Search
      /></el-icon>
    </div>
    <Dialog
      v-model="visible"
      :multipleSelection="data"
      :options="options"
      ref="dialogRef"
      @confirm="confirm"
    ></Dialog>
  </div>
</template>
<script lang="ts" setup>
import eventBus from "@/utils/event-bus";
import { inject, ref, computed, watch } from "vue";
import Dialog from "./components/select-process-dialog.vue";
const elForm = inject("elForm");
const elFormItem = inject("elFormItem");

const props = defineProps({
  // 选择的流程
  modelValue: {
    type: Object,
    default: () => ({}),
  },
  title: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  placeholder: {
    type: String,
    default: "",
  },
  options: {
    type: Object,
    default: () => ({}),
  },
});
const data: any = computed(() => props.modelValue || []);

const emit = defineEmits(["update:modelValue", "change"]);

// icon的显示隐藏
const isShow = ref(false);
const showIcon = () => {
  isShow.value = true;
};
const hideIcon = () => {
  isShow.value = false;
};

// 弹窗
const visible = ref(false);
const dialogRef = ref();
/**
 * 打开弹窗 初始化弹窗信息
 */
const openDialog = () => {
  visible.value = true;
  dialogRef.value.init();
};

/**
 * 确认按钮 更新表格选中的数据
 */
const confirm = (val: any) => {
  emit("update:modelValue", val);
  emit("change");
  visible.value = false;
};

const removeProcess = (item: any) => {
  const data = props.modelValue.filter(
    (i: any) => i.exampleId !== item.exampleId
  );
  emit("change");
  emit("update:modelValue", data);
};

const jump = (item: any) => {
  eventBus.$emit("process_jump", item);
};

defineExpose({});
</script>

<style lang="scss" scoped>
.zhlx-processSelset-container {
  .process {
    display: flex;
    align-items: center;
    height: 100%;
    :deep(.read-only) {
      .el-input__wrapper {
        cursor: default;
      }
      .el-input__inner {
        caret-color: transparent;
        pointer-events: none; /* 禁止所有鼠标事件 */
        user-select: none; /* 禁止文本选中 */
      }
    }
    .content {
      display: flex;
      align-items: center;
      height: 100%;
      flex: 1;
      .text {
        height: 100%;
      }
      .right {
        width: 10px;
        height: 100%;
        margin: 0 7px;
      }
      .close {
        font-size: 12px;
      }
      .icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
      }
      .t-item {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
      }
      .text {
        width: 100%;
        cursor: pointer;
        .text-content {
          display: flex;
          align-items: center;
          &:hover * {
            color: #409eff;
          }
          :deep(.el-input__wrapper) {
            cursor: pointer;
            box-shadow: none;
            &:hover {
              color: #409eff;
              box-shadow: none !important;
            }
            .el-input__inner {
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
  }
  .icon {
    cursor: pointer;
    margin-left: 5px;
    flex: 0 0 20px;
  }
}
/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}
</style>
